<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改个人信息</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon"/>
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>
<div class="layui-form" style="margin-top: 20px;">
    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label"><span style="color: red;">* </span>头像</label>
            <div class="layui-input-block">
                <img id="currentheadPortrait" class="layui-nav-img">
                <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon">&#xe67c;</i>更换头像
                </button>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label"><span style="color: red;">* </span>账号</label>
            <div class="layui-input-inline">
                <input style="color: red;" disabled="disabled" id="userName" type="text" class="layui-input" placeholder="请输入用户名">
            </div>
            <div class="layui-form-mid layui-word-aux">不可更改</div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label"><span style="color: red;">* </span>姓名</label>
            <div class="layui-input-block">
                <input id="name" type="text" class="layui-input" placeholder="请输入用户名">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label"><span style="color: red;">* </span>邮箱</label>
            <div class="layui-input-block">
                <input id="email" type="text" class="layui-input" placeholder="请输入邮箱">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input id="telephone" type="text" class="layui-input"
                       placeholder="请输入手机号(可不填,用于找回账号)">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label">qq</label>
            <div class="layui-input-block">
                <input id="qq" type="text" class="layui-input" placeholder="请输入qq号(可不填,用于找回账号)">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label">微信号</label>
            <div class="layui-input-block">
                <input id="weChat" type="text" class="layui-input"
                       placeholder="请输入微信号(可不填,用于找回账号)">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="mui-input-row">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input id="address" type="text" class="layui-input" placeholder="请输入地址">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="-1" title="无" checked>
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
    <div class="mui-button-row">
        <button id="update" type="button" class="layui-btn layui-btn-primary" style="width: 100%;">修改</button>
    </div>


</div>
</body>
<script>
    //图片上传
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            ,url: imageServerURL+'/upload' //上传接口
            ,acceptMime: 'image/*'
            ,done: function(res, index, upload){
                //上传完毕回调
                layer.msg("头像上传成功,正在更换中...");
                changeHeadPortrait(res.name);
            }
            ,error: function(index, upload){
                //请求异常回调
            }
        });
    });
    
    function changeHeadPortrait(headPortrait) {
        var user = getLocalObject("user");
        $.ajax(serverURL + '/user/updateUserHeadPortrait', {
            type: "post",
            async: false,
            dataType: 'json', //服务器返回json格式数据
            data: {
                userId: user.id,
                headPortrait:headPortrait
            },
            success: function (data) {
                if (isNotBlank(data.data)) {
                    layer.msg("头像已更换");
                    var currentUser = user;
                    currentUser.headPortrait=headPortrait;
                    setLocalObject("user",currentUser);
                    $("#currentheadPortrait").attr("src",imageServerURL+"/"+headPortrait);
                } else {
                    layer.msg(data.meta);
                }
            },
            error: function (e) {
                console.log(e)
            }
        });
    }


    init();
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        var form = layui.form;
        form.render();
        element.init();
    });

    $("#update").click(function () {
        update();
    });

    function init() {
        var user = getLocalObject("user");

        //头像
        $("#currentheadPortrait").attr("src",imageServerURL+"/"+user.headPortrait);

        $('#userName').val(user.userName);
        $('#telephone').val(user.telephone);
        $('#name').val(user.name);
        $('#address').val(user.address);
        $('#email').val(user.email);
        $('#qq').val(user.qq);
        $('#weChat').val(user.weChat);
        $('input[value="'+user.sex+'"]').attr("checked","checked");
    }

    function update() {
        //验证
        var userName = $('#userName').val();
        var telephone = $('#telephone').val();
        var name = $('#name').val();
        var address = $('#address').val();
        var email = $('#email').val();
        var qq = $('#qq').val();
        var weChat = $('#weChat').val();
        var sex = $('input[name="sex"]:checked').val();

        if (isBlank(name)) {
            layer.msg("请输入姓名");
            $("#name").focus();
            return;
        }
        if (isBlank(userName)) {
            layer.msg("请输入账号");
            $("#userName").focus();
            return;
        }

        if (isBlank(email)) {
            layer.msg("请输入邮箱");
            $("#email").focus();
            return;
        }
        if ('-1' == sex) {
            layer.msg("请选择性别");
            return;
        }
        $.ajax(serverURL + '/user/updateUser', {
            type: "post",
            async: false,
            dataType: 'json', //服务器返回json格式数据
            data: {
                userId: getLocalObject("user").id,
                telephone: telephone,
                name: name,
                address: address,
                email: email,
                sex: sex,
                qq: qq,
                weChat: weChat
            },
            success: function (data) {
                if (isNotBlank(data.data)) {
                    layer.msg("修改成功");
                    var currentUser = getLocalObject("user");
                    currentUser.telephone=data.data.telephone;
                    currentUser.name=data.data.name;
                    currentUser.address=data.data.address;
                    currentUser.email=data.data.email;
                    currentUser.sex=data.data.sex;
                    currentUser.qq=data.data.qq;
                    currentUser.weChat=data.data.weChat;
                    setLocalObject("user",currentUser);
                } else {
                    layer.msg(data.meta);
                }
            },
            error: function (e) {
                console.log(e)
            }
        });
    }
</script>
</html>